<template>
  <div>
  <detail-banner :sightName='sightName' :bannerImg="bannerImg" :gallaryImgs="gallaryImgs"></detail-banner>
  <detail-header></detail-header>
  <detail-list :list="categoryList"></detail-list>
  <detail-comments></detail-comments>
  <div class="content"></div>
  </div>
</template>
<script>
import DetailBanner from "./components/banner";
import DetailHeader from "./components/header";
import DetailList from "./components/list";
import DetailComments from "./components/comments";
import axios from "axios";
export default {
  name: "Detail",
  components: {
    DetailBanner,
    DetailHeader,
    DetailList,
    DetailComments
  },
  data() {
    return {
      sightName:'',
      bannerImg:'',
      gallaryImgs:[],
      categoryList:[],
      list: [
        {
          title: "学生票",
          children: [
            {
              title: "成人三馆联票",
              children: [{ title: "成人三馆联票-5555" }]
            },
            { title: "成人六馆联票" }
          ]
        },
        { title: "成人票" },
        { title: "老人票" },
        { title: "情侣票" }
      ]
    };
  },
  methods: {
    getDetailInfo() {
      // axios.get('/api/detail.json?id=?'+this.$router.params)
      /**
      注意 传值的时候 是$route . 而不是$router.要不请求不了数据的
       */
      axios
        .get('/api/detail.json', {
          params: {
            id: this.$route.params.id
          }
        })
        .then(this.handleGetData);
    },
    handleGetData(res) {
      console.log(res)
      res = res.data;
      if (res.ret && res.data) {
        const data =res.data;
        this.sightName = data.sightName;
        this.bannerImg = data.bannerImg;
        this.gallaryImgs = data.gallaryImgs;
        this.categoryList =data.categoryList;
      }
    }
  },
  /**
   * 这里的话。 如果用Mounted写的话。 因为这个组件被keep-alive包围住。那么切换详情的时候，请求的数据还是不变的。 还是id=001.
   * 解决办法1 用activated去请求函数。因为activated在Keepalive中可以请求新的数据
   * 解决办法2 。 命名的重要性 在keep-alive中加一个 exclude="Detail"
   * name的作用。  递归组件的时候可以用
   *               在Keep-alive取消缓存的作用
   *                vue-tool 调试中显示name的
   *
   */
  mounted() {
    this.getDetailInfo();
  }
};
</script>
<style lang="stylus" scoped>
.content {
  height: 50rem;
}
</style>

